<template>
  <el-dialog title="自定义表格" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="600px">
    <el-checkbox-group v-model="columnsFields" @change="handleCheckedChange">
      <ul class="customList">
        <draggable  :list="customColumns"
                    dragClass="dragClass"
                    ghostClass="ghostClass"
                    chosenClass="chosenClass"
                    draggable=".item"
                    handle=".dragIcon"
        >
          <li v-for="(item) in customColumns" class="item">
            <div class="custom-left">
              <svg-icon class-name="dragIcon" icon-class="ilist"  style="cursor: pointer"/>
              <span> {{ item.label }}</span>
            </div>
            <el-checkbox :key="item.label" :label="item.label"></el-checkbox>
          </li>
        </draggable>


      </ul>
    </el-checkbox-group>
    <div class="footer-btn" slot="footer">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button>提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import draggable from 'vuedraggable'
  export default {
    name: 'customListPage',
    components: {
      draggable
    },
    data() {
      return {
        drag:false,
        columnsFields:[],//需要导出的字段
        customColumns: [
          {key: 'name', label: `客户`, visible: true, minWidth: 150, fixed: true},
          {key: 'mobile', label: `性别`, visible: true, minWidth: 150, fixed: false},
          {key: 'email', label: `称呼`, visible: true, minWidth: 200},
          {key: 'last_login_time', label: `所属企微号`, visible: true, minWidth: 200},
          {key: 'create_time', label: `添加时间`, visible: true, minWidth: 200},
          {key: 'check_payCreate_time', label: `企微标签`, visible: true, minWidth: 200},
          {key: 'check_payStatus_name', label: `智能标签`, visible: true, minWidth: 150},
          {key: 'account_infoStatus_name', label: `客户最后发言`, visible: true, minWidth: 150},
          {key: 'all_num', label: `客户来源`, visible: true, minWidth: 150},
          {key: 'open_num', label: `好友关系`, visible: true, minWidth: 150},
          {key: 'check_num', label: `流失时间`, visible: true, minWidth: 150},
          {key: 'waiting_coin', label: `员工最后发言`, visible: true, minWidth: 150},
          {key: 'operate', label: `操作`, visible: true, minWidth: 150},
        ],
      }
    },
    created() {
    },
    mounted() {
    },
    watch: {},
    methods: {
      handleCheckedChange(val) {

      },
      handleCloseDialog() {
        this.$emit('update:visableIf', false);
        this.$emit('handleQuery');
      }
    }
  }
</script>

<style scoped lang="scss">
  .customList {
   li{
     height: 40px;
     line-height: 40px;
     background: #f7f7f7;
     border-radius: 4px;
     font-size: 14px;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     color: rgba(0, 0, 0, .85);
     padding: 0 16px;
     list-style: none;
     display: flex;
     justify-content: space-between;
     margin-bottom: 8px;
     span {
       margin-left: 10px;
     }
   }
  }
  ::v-deep .el-dialog__body {
    max-height:600px;
    overflow-y: auto;
    height:auto;
  }
  .footer-btn {
    display: flex;
    justify-content: flex-end;
  }
  .el-checkbox-group {
    .el-checkbox {
      margin-bottom: 12px;
      ::v-deep .el-checkbox__label {
        display: none;
      }
    }
  }
  .custom-container {
    /* 添加自定义样式 */
  }

  /* 修改拖动时的阴影效果 */
  .customList .sortable-ghost {
    box-shadow: none;
    background: #000;
  }
  /*定义要拖拽元素的样式*/
  .ghostClass{
    background-color:  blue !important;
  }
  .chosenClass{
    background-color: #eee !important;
    opacity: 1!important;
  }
  .dragClass{
    background-color: #f7f7f7 !important;
    opacity: 1 !important;
    box-shadow:none !important;
    outline:none !important;
    background-image:none !important;
  }
</style>
